<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/reset.css">
    <style>
        #app{
            width:500px;
            margin:50px auto;
        }
        .box{
            width:1rem;
            height:1rem;
            border-radius: 1rem;
            border: 2px solid #666;
            display: inline-block;
        }
        .boxAdd{
            background-color: #714f52;
        }
    </style>
    <script src="../lib/vue.js"></script>
</head>
<body>

<div id="app">

    <div>
        <label v-for="item in list" class="ml10">
            <input type="radio" v-model="checked" :value="item.name" class="hide">
            <span class="box" :class="{'boxAdd':checked == item.name}"></span>
            <span>{{item.name}}</span>
        </label>

    </div>

    <div class="mt10">选择：{{checked}}</div>


</div>
</body>
<script>

    var _list = [
        {
            id:1,
            name:'小明',
            age:12
        },
        {
            id:2,
            name:'小李',
            age:11
        },
        {
            id:3,
            name:'小红',
            age:11
        }
    ]


    var app = new Vue({

        el:'#app',

        data:{

            checked:'',

            list:_list,
        },
        computed:{


        },
        methods:{

            checkFun:function(){
                console.log()
            },
        }

    })
</script>
</html>














